<template>
  <div class="nav-box">  
      <nav
            class="sc-lmoMya DA-DyC global-nav"
            style="box-shadow: rgb(236, 236, 236) 0px 0px 0px 1px; height: 64px"
          >
            <div class="view-1">
              <div data-type="button" class="_1UYhH">
                <img height="120px" src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20220221/1645451051397-6e21ba1c-8de4-4c8c.png" />
              </div>
              <div class="aG82s">
                <div class="center" @click="$router.push({path:'/'})"> 
                  <div :class="[ '_1bd3p navbarItem nav-link' , active == 1 ?'_209Vv' : '' ] " data-nav="">
                    <div class="_35226 _34ZCy"><span>首页</span></div>
                  </div>
                <div 
                     :class="[ '_1bd3p navbarItem nav-link' , active == 2 ?'_209Vv' : '' ] "
                    data-nav="designerCommunity"
                  >
                    <div class="_35226 _34ZCy" @mouseover="setShow(1)" >
                      <span>产品中心</span
                      ><i>
                        <svg
                          width="23"
                          height="20"
                          viewBox="0 0 23 20"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            opacity="0.68"
                            d="M7.21777 7.5L12.2178 12.5L17.2178 7.5"
                            stroke="black"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          ></path>
                        </svg>
                      </i>
                    </div>
                  </div>
                  <div :class="[ '_1bd3p navbarItem nav-link' , active == 3 ?'_209Vv' : '' ] " data-nav="advantage" @mouseover="setShow(2)" @mouseout="hideShow(2)">
                    <div class="_35226 _34ZCy">
                      <span>行业方案</span
                      ><i>
                        <svg
                          width="23"
                          height="20"
                          viewBox="0 0 23 20"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            opacity="0.68"
                            d="M7.21777 7.5L12.2178 12.5L17.2178 7.5"
                            stroke="black"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          ></path>
                        </svg>
                      </i>
                    </div>
                  </div>
                  <div :class="[ '_1bd3p navbarItem nav-link' , active == 4 ?'_209Vv' : '' ] " data-nav="">
                    <div class="_35226 _34ZCy"><span>帮助中心</span></div>
                  </div>
                  <div  :class="[ '_1bd3p navbarItem nav-link' , active == 5 ?'_209Vv' : '' ] " data-nav="">
                    <div class="_35226 _34ZCy">
                      <span>关于我们</span>
                    </div>
                  </div>
                </div>
                <!-- _14zM1-->
                <div :class="[ '_3_bh1' , header_Li_show1 ? '_14zM1':'' ]"  @mouseover="setShow(1)" @mouseout="hideShow(1)">
                  <div class="_1pxdm">
                    <div
                      class="_3rYEP"
                      style="
                        width: 380px;
                        height: 281px;
                        transform: translateX(-37px);
                      "
                    >
                      <div class="MLILk">
                        <div class="_2GC2Q _34ZCy">
                          <div class="-xhWm" @click="$router.push({ path:'/detail'})">
                            <i class="_3Oa6V"
                              ><img
                                src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20220221/1645448851739-aa0caf63-bb65-4868.png"
                                width="28"
                                height="28"
                            /></i>
                            <div class="_11qJ9">
                              <h6 class="">硬件产品</h6>
                              <span>振动温度转速一体式传感器，智能润滑集群，基站网关，边缘盒</span>
                            </div>
                          </div>
                        </div>
                        <div class="_2GC2Q _34ZCy">
                          <div class="-xhWm" @click="$router.push({ path:'/detail'})">
                            <i class="_3Oa6V"
                              ><img
                                src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20220221/1645449008560-24eaf67f-aed8-4724.png"
                                width="28"
                                height="28"
                            /></i>
                            <div class="_11qJ9">
                              <h6 class="">软件产品</h6>
                              <span>设备预测性运维系统，设备管理系统，微信小程序</span>
                            </div>
                          </div>
                        </div>
                      </div>
                 
                    </div>
                    <!-- <div
                      class="_2lhsC"
                      style="transform: translateX(-37px) scaleX(1) scaleY(1)"
                    ></div> -->
                  </div>
                </div>
                <div :class="[ '_3_bh1' , header_Li_show2 ? '_14zM1':''  ]"  @mouseover="setShow(2)" @mouseout="hideShow(2)">
                  <div class="_1pxdm">
                    <div
                      class="_3rYEP"
                      style="
                        width: 380px;
                        height: 281px;
                        transform: translateX(83px);
                      "
                    >
                      <div class="MLILk">
                        <div class="_2GC2Q _34ZCy">
                          <div class="-xhWm">
                            <i class="_3Oa6V"
                              ><img
                                src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20220221/1645449294736-0f340982-7dc7-402f.png"
                                width="28"
                                height="28"
                            /></i>
                            <div class="_11qJ9">
                              <h6 class="">石化冶金</h6>
                              <span>促进节能减，排提高产品质量并降低维护成本</span>
                            </div>
                          </div>
                        </div>
                        <div class="_2GC2Q _34ZCy">
                          <div class="-xhWm">
                            <i class="_3Oa6V"
                              ><img
                                src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20220221/1645449354385-e705bff9-5be2-4257.png"
                                width="28"
                                height="28"
                            /></i>
                            <div class="_11qJ9">
                              <h6 class="">矿山能源</h6>
                              <span>实时故障检测和警报，提升资产的利用率和可用性</span>
                            </div>
                          </div>
                        </div>
                       
                      </div>
                    </div>
                    <!-- <div
                      class="_2lhsC"
                      style="
                        transform: translateX(83px) scaleX(0.992898) scaleY(1);
                      "
                    ></div> -->
                  </div>
                </div>
              </div>
              <div class="right">
                <div class="right">
                  <div data-type="button" class="sc-dlfnuX igbXLM" @click="goAbout()">
                    <div class="primary-button _34ZCy">联系我们</div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
  </div>

</template>

<script> 
export default { 
  components: {
    
  },
  data () {
    return { 
      header_Li_show1:false,
      header_Li_show2:false,
    }
  },
  created(){ 
  },
  mounted () { 
      
  },
  props:{
    active:{
      type:String | Number,
      value:1
    }
  },
  filters: {
     
  },
  
  methods: {
    goAbout(){
      this.$parent.toPage(6);
    },
    setShow(i){ 
      if(i==1){
          this.header_Li_show1 = true;
          this.header_Li_show2 = false;
      }else{
            this.header_Li_show1 = false;
          this.header_Li_show2 = true;
      }
        
    },
    hideShow(i){
        if(i==1){ 
            this.header_Li_show1 = false;
        }else{
             this.header_Li_show2 = false; 
        }
    },
  }
}
</script>
<style lang="less" scoped> 
</style>